<template>
    <div class="product-detail-view">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <LoadingSpinner />
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-container">
            <EmptyState :title="error.title" :description="error.description" :icon="Warning" />
        </div>

        <!-- 商品详情 -->
        <div v-else-if="product" class="product-detail-container">
            <el-row :gutter="40">
                <el-col :xs="24" :sm="12">
                    <div class="product-image-container">
                        <img :src="product.imageUrl" :alt="product.name" class="product-image" />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12">
                    <div class="product-info-container">
                        <h1 class="product-name">{{ product.name }}</h1>
                        <p class="product-description">{{ product.description }}</p>

                        <div class="product-meta">
                            <div class="product-points">
                                <span class="points-value">{{ product.point }}</span>
                                <span class="points-unit">积分</span>
                            </div>
                            <div class="product-stock">
                                <el-tag v-if="product.status === 0" type="success">有库存</el-tag>
                                <el-tag v-else type="info">缺货</el-tag>
                            </div>
                        </div>

                        <div class="product-actions">
                            <el-button type="primary" size="large" @click="handleAddToCart" :disabled="!canAddToCart"
                                :loading="adding">
                                {{ buttonText }}
                            </el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getProductDetail } from '@/api/modules/product'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import type { Product } from '@/types'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'
import EmptyState from '@/components/base/EmptyState.vue'
import { Warning } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const cartStore = useCartStore()

const product = ref<Product | null>(null)
const loading = ref(false)
const adding = ref(false)
const error = ref<{ title: string; description: string } | null>(null)

// 加载商品数据
const loadProduct = async () => {
    try {
        loading.value = true
        const productId = route.params.id as string
        product.value = await getProductDetail(Number(productId))
    } catch (e: any) {
        if (e.response && e.response.status === 404) {
            error.value = {
                title: '商品不存在',
                description: '您要查找的商品可能已下架或不存在。',
            }
        } else {
            error.value = {
                title: '加载失败',
                description: '获取商品信息失败，请稍后重试。',
            }
        }
        console.error('获取商品详情失败:', e)
    } finally {
        loading.value = false
    }
}

// 是否可以添加到购物车
const canAddToCart = computed(() => {
    return userStore.isAuthenticated && product.value?.status === 0
})

// 按钮文本
const buttonText = computed(() => {
    if (!userStore.isAuthenticated) {
        return '请先登录'
    }
    if (product.value?.status !== 0) {
        return '缺货'
    }
    if (product.value && cartStore.isInCart(product.value.id)) {
        return '已在购物车'
    }
    return '加入购物车'
})

// 处理添加到购物车
const handleAddToCart = async () => {
    if (!canAddToCart.value || !product.value) {
        if (!userStore.isAuthenticated) {
            ElMessage.warning('请先登录')
        }
        return
    }

    try {
        adding.value = true
        cartStore.addToCart(product.value)
    } catch (error) {
        console.error('添加到购物车失败:', error)
    } finally {
        adding.value = false
    }
}

// 组件挂载时加载数据
onMounted(() => {
    loadProduct()
})
</script>

<style scoped>
.product-detail-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.loading-container,
.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.product-image-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.product-info-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-name {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.product-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.product-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.product-points {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.points-value {
    font-size: 24px;
    font-weight: 600;
    color: #e6a23c;
}

.points-unit {
    font-size: 14px;
    color: #999;
}

.product-actions {
    margin-top: auto;
}

.product-actions .el-button {
    width: 100%;
    max-width: 200px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .product-detail-view {
        padding: 20px;
    }

    .product-info-container {
        margin-top: 20px;
    }

    .product-name {
        font-size: 24px;
    }

    .product-actions .el-button {
        width: 100%;
        max-width: none;
    }
}
</style>
